<template>
  <div class="category">
    <div class="center">
      <my-category-banner></my-category-banner>
      <my-category-list :children="goodsData.children"></my-category-list>
      <my-category-goods :children="goodsData.children"></my-category-goods>
    </div>
  </div>
</template>
<script>
import { ref, reactive, toRefs, computed } from "vue";
import { useRouter, useRoute, onBeforeRouteUpdate } from "vue-router";
import { useStore } from "vuex";
/* 引入请求分类数据接口 */
import { getCategoryData } from "api/category/category.js";
/* 引入分类轮播图组件 */
import myCategoryBanner from "components/privately/Category/myCategoryBanner";
/* 引入分类全部分类组件 */
import myCategoryList from "components/privately/Category/myCategoryList";
/* 引入分类的商品卡片 */
import myCategoryGoods from "components/privately/Category/myCategoryGoods";

export default {
  props: {},
  name: "category",
  setup(props, ctx) {
    /* 定义仓库 */
    const store = useStore();
    /* 定义路由传参 */
    const router = useRouter();
    /* 定义路由收参 */
    const route = useRoute();
    /* 定义总数据存放地址 */
    const data = reactive({
      id: route.params.id,
      goodsData: [],
    });
    getCategoryData(data.id).then((res) => {
      // console.log(res);
      data.goodsData = res.result;
    });
    /**
     * 在路由更新之后请求数据
     * 如果不用路由导航守卫，路由更新之后Ajax请求是不会执行的
     * 因为只是在组件进来之前执行了一次，不会在此执行，所以需要用到路由导航守卫
     */
    onBeforeRouteUpdate((to, from) => {
      data.id = to.params.id;
      getCategoryData(data.id).then((res) => {
        data.goodsData = res.result;
      });
    });
    return { ...toRefs(data) };
  },
  components: {
    myCategoryBanner,
    myCategoryList,
    myCategoryGoods,
  },
};
</script>
<style lang="scss" scoped>
/* 如果不想样式污染  就加个scoped */
.category {
  background-color: #f5f5f5;
  .center {
    width: 1240px;
    margin: 0 auto;
  }
}
</style>